/* 基本默认{样式 */


html{
  font-size: 62.5%;
  color: #222;
}

::selection{
  background-color: #b3d4fc;
  text-shadow: none;
}

ul{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

body{
  font-size: 1.2rem;
  line-height: 1.5;
  background-color:rgb(237, 237, 237);
}

a{
  text-decoration: none;
  color: #666;
}

a:hover,
a:active{
  color: #0ae;
  text-decoration: underline;
}


/* 工具样式 */

.center-block{
  display: block;
  margin: 0 auto;
}

.pull-right{
  float: right;
}

.pull-left{
  float: left;
}

.text-right{
  text-align: right;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.hide{
  display: none;
}

.show{
  display: block;
}

.invisible{
  visibility: hidden;
}

.text-hide{
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

/* 清除浮动 */
.clearfix:before{
  content:".";
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
}

.clearfix{
  clear: both;
}


/* 浏览器升级 */

.updatabrowser{
  padding: 1rem;
  background-color: gray;
  margin: 0;
}

header{
  width: 100%;
}

header .top{
  line-height: 3rem;
  background-color: #555;
}
header .top .tel{
  float: left;
  color: white;
}

header .top ul{
  text-align: right;
}

header .top ul li{
  display: inline-block;
}
header .top ul li+li{
  border-left: 1px solid #999;
  margin-left: -3px;
}
header .top ul li a{
  display: inline-block;
  padding: 0 1.5rem;
  color:rgb(252, 244, 244);
}

@media only screen and (max-width:800px){
  header .top ul li a{
    padding: 0 1rem;
  }
}

@media only screen and(min-width:481px) and (max-width:800px){

}

@media only screen and (max-width:480px){
  header .top .tel,
  header .top ul li:nth-child(3),
  header .top ul li:nth-child(4){
    display: none;
  }

}

header .main{
  padding: 0;
  line-height: 5.5rem;
}
header .main .brand{
  float: left;
  padding: 0 1.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
}

header .main ul{
  text-align: right;
}

header .main ul li{
  display: inline;
}
header .main ul li a{
  padding: 0 3rem;
}

@media only screen and (max-width:800px){
  header .main{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header .main ul li a{
    padding: 0 1.5rem;
  }
}
@media only screen and(min-width:481px) and (max-width:800px){

}
@media only screen and (max-width:480px){
  header .main ul li:nth-child(4),
  header .main ul li:nth-child(5){
    display: none;
  }
}
/* 内容 */

.container .transaction{
  width: 100%;
  background-color: rgb(111, 102, 83);
}
.container .transaction .trans-content{
  width: 90%;
  margin: 0 auto;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-around;
}
.container .transaction .trans-content .trans-data{
    float: left;
    padding: 1rem;
    text-align: left;
}
.container .transaction .trans-content .trans-data span{
  display: inline-block;
  line-height: 3rem;
  color: white;
}
.container .transaction .trans-content .trans-data .trans-money{
  color: rgb(226, 226, 134);
  background-color: white;
  font-size: 2rem;
  border: 0.1rem solid gray;
}
.container .transaction .trans-content .trans-report{
  text-align: right;
}
.container .transaction .trans-content .trans-report a{
  color: white;
  line-height: 3rem;
  padding: 1rem;
  display: inline-block;
}

@media only screen and (max-width:800px){
  .container .transaction .trans-content{
    width: 100%;
    flex-wrap: wrap;
  }
  .container .transaction .trans-content .trans-data .trans-money{
    background-color: rgb(111, 102, 83);
    border: none;
  }
}
@media only screen and (min-width:481px) and (max-width:800px){

}
@media only screen and (max-width:480px){
  .container .transaction .trans-content{
    flex-direction: column;
    align-items: center;
  }
}
.ad{

}
.feature{
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem 0;
}
.feature .item{
  float: left;
  display: inline-flex;
  width: calc(33.333333% - 3rem);
  border-radius: 0.4rem;
  box-shadow: 1px 1px 3px #888888;
}
.feature .item+.item{
  margin-left: 2rem;
}

.feature .item h3{
  float: left;
  text-align: center;
  width:30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgb(204, 204, 135);
}
.feature .item p{
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: #888;
}

@media only screen and (max-width:800px){
  .feature .item{
    flex-direction: column;
    align-items: center;
  }
  .feature .item h3{
    margin: 0;
    font-size: 2.5rem;
    white-space: nowrap;
  }
  .feature .item p{
    text-align: center;
  }
}
@media only screen and (max-width:480px){
  .feature{
    flex-direction: column;
    align-items: center;
  }
  .feature .item{
    flex-direction: row;
    width: 90%;
  }
  .feature .item+.item{
    margin-left: 0;
    margin-top: 2rem;
  }
}

.notice{
  width: calc(100% - 6rem);
  margin: 0 auto;
  background-color: #fff;
  line-height: 3rem;
  padding: 0 2rem;
  box-sizing: border-box;
  margin-top: 2rem;
}

.notice .more{
  float:right;
  color: rgb(247, 212, 56);
  font-weight: bolder;
}

@media only screen and (max-width:480px){
  .notice{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.product{
  display: flex;
  width: calc(100% - 6rem);
  margin: 0 auto;
  border-top: 2px solid rgb(207, 168, 38);
  margin-top: 1rem;
}
.product h2{
  float: left;
  display:flex;
  flex-direction: column;
  width: 20%;
  align-items: center;
}
.product h2 .title{
  margin: 0;
  font-size: 2.2rem;
}
.product h2 em{
  font-size: 1.5rem;
  font-style: normal;
  line-height: 2;
}
.product-content{
  text-align: right;
  flex: 1;
}
.product-content .item{
  display: flex;
  line-height: 3rem;
  background-color: #fff;
  padding-bottom: 1rem;
}
.product-content .item h3{
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 1px rgb(237, 237, 237);
  margin: 0;
}
.product-content .item h3 em{
  font-size: 3rem;
  color: #888;
  font-style: normal;
}
.product-content .item .info{
  width: 50%;
  box-shadow: 0 0 1px rgb(237, 237, 237);
}
.product-content .item .info p{
  display: inline-block;
  width: 45%;
  padding-left: 1rem;
}
.product-content .item .info p span{
  display: block;
}
.year-radio{
  font-size: 3rem;
  font-weight: bold;
  color: rgb(255,147,0);
}
.money{
  font-size: 2.5rem;
  font-weight: bold;
  color: rgb(255,147,0);
}
.product-content .item .info p span i{
  color: gray;
  font-size: 1rem;
}

.product-content .item .buy {
  box-shadow: 0 0 1px rgb(237, 237, 237);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  float: right;
  text-align: center;
}
.product-content .item .buy a{
  height: 3rem;
  width: 6rem;
  background-color:rgb(241,193,96);
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

@media only screen and (max-width:800px){
  .product{
    flex-direction: column;
  }
  .product h2{
    flex-direction: row;
    width: 100%;
    justify-content: center;
  }
  .year-radio,
  .money{
    font-size: 2rem;
  }
  .product-content .item .info {
    white-space: nowrap;
    width: 70%;
  }
}
@media only screen and (max-width:480px){
  .product-content .item .buy{
    width: 90%;
  }
  .product-content .item .buy a{
    width: 100%;
  }
  .product-content .item{
    flex-wrap: wrap;
    justify-content: center;
  }
  .product h2{
    flex-wrap: wrap;
  }
  .product h2 .title{
    flex-basis: 100%;
    text-align: center;
    font-size: 1.8rem;
  }
  .product h2 em{
    font-size: 1rem;
  }
}

.footer{
  background-color: #fff;
  width: 100%;
  margin-top:2rem;
  padding: 2rem 0;
}
.footer .footer-content{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.footer .footer-content .brand{
  float: left;
  background: url(../img/logo@1x.png);
  height: 3rem;
  width: 15rem;
  background-repeat: no-repeat;
}
.footer .footer-content ul{
  float: left;
  width: 15%;
}
.footer .footer-content ul .title{
  font-size: 1.5rem;
}
.footer .footer-content ul li {
  line-height: 3rem;
  text-align: center;
}




/* 底部 */
footer{
  padding: 5rem 0 10rem;
  background-color:rgb(237, 237, 237);
}
footer ul{
  text-align: center;
}
footer p{
  text-align: center;
}
footer ul li{
  display: inline;
}
footer ul li .icon{
  display: inline-block;
  text-indent: -999rem;
  margin-left: 1.5rem;
  background-image: url(../img/cert1.png);
  background-size: 466px 447px;
  overflow: hidden;
}
.icon-ywzfxk{
  background-position: 97px 401px;
  height: 27px;
  width: 38px;
}
.icon-pcirk{
  background-position: 356px 351px;
  height: 27px;
  width: 79px;
}
.icon-visayz{
  background-position: 40px 357px;
  height: 27px;
  width: 36px;
}
.icon-vsjmfw{
  background-position: 65px 260px;
  height: 27px;
  width: 63px;
}
.icon-wlgs{
  background-position: 396px 398px;
  height: 27px;
  width: 22px;
}
.icon-rzcx{
  background-position: 151px 312px;
  height: 27px;
  width: 76px;
}
.icon-gs{
  background-position: 102px 244px;
  height: 27px;
  width: 37px;
}

@media only screen and (max-width:800px){
  .footer .footer-content .brand{
    display: none;
  }
  .footer .footer-content ul .title{
    font-size: 1.2rem;
  }
  .footer .footer-content ul li {
    line-height: 2rem;
  }
}
